<template>
  <div class="my-portfolios">
    <div class="headline">
      <span></span>我的组合持仓
    </div>
    <table class="table">
      <tbody>
      <tr id="'groupId_'+item.groupId" v-for="(item,index) in groupList">
        <td class="one">
          <a href="javascript:;" @click.stop.prevent="toGroupDetail(item)">
            <span class="is-group">组合</span>
            <div class="group-name" >{{item.name}}</div>
          </a>
        </td>

        <td class="two">
          <div class="value">{{item.position}}%</div>
          <div class="key">仓位</div>
        </td>

        <td class="three">
          <div class="value" :class="item.income< 0 ? 'negative': 'positive'">{{item.income}}</div>
          <div class="key">盈亏(<span
            :class="item.totalProfitrate<0?'negative':'positive'">{{item.totalProfitrate}}%</span>)
          </div>
        </td>

        <td class="four">
          <button class="btn change-name" :data-groupId="item.groupId" :data-index="index"
                  @click.stop.prevent="setGroupNameModal(item)">
            <i class="iconfont icon-huanmingzi"></i>
            <div>改名称</div>
          </button>

          <button class="btn clear-out" @click.stop.prevent="clearanceModal(item)">
            <div>一键</div>
            <div>清仓</div>
          </button>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="placeholder" v-if="groupList.length == 0">
      <div class="content">
        <div class="tips" v-if="error ==''">哎呦，我还没有<span class="">组合持仓</span>哦</div>
        <div class="guide" v-if="error ==''">点击下方建立我的第一个组合</div>
        <div class="tips" v-if="error!=''">{{error}}</div>
      </div>
    </div>
  </div>

</template>

<script>
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LocalDAO from 'common/localDAO'

  export default {
    data () {
      return {
        groupList: [],
        error:'',
        testData: 'testData'
      }
    },
    props: {
      userCode: {
        type: String
      }
    },
    created: function () {
      this.fetchData();
    },
    methods: {
      fetchData(){
        //查询用户组合列表
        RemoteDAO.callJCL11138(this.userCode, '0', (response)=> {
          if (Number(response.error) === 0) {
            var data = response.data.body.grouplist;
            var list = [];
            _.each(data, function (item, index) {
              var object = {};
              object.groupId = item.group_id;
              object.name = item.group_name;
              object.position = CommonUtil.toFixed(item.position, 2);
              object.statue = item.statue;
              object.income = CommonUtil.toFixed(item.total_profit, 2);
              object.totalProfitrate = CommonUtil.toFixed(item.total_profitrate, 2);
              if (object.income > 0) {
                object.income = "+" + object.income
              }
              if (object.totalProfitrate > 0) {
                object.totalProfitrate = "+" + object.totalProfitrate
              }
              list.push(object);
            });
            this.groupList = list;
          } else {
            this.error = response.data;
          }
        });
      },
      toGroupDetail(item){
        var groupId = item.groupId;
        this.$router.push({path: '/groupdetail', query: {groupId: groupId, clientId: this.userCode}})
      },
      setGroupNameModal(item){
        var self = this
        var groupId = item.groupId
        this.$store.dispatch('setModal', {visible: true, modalId: 'groupSetNameModal', groupId: groupId, callback:function(response){
          if(Number(response.error) === 0){
            item.name=response.name;
          }
        }});
      },
      clearanceModal(item){
        this.$store.dispatch('setModal', {visible: true, modalId: 'groupClearanceModal', groupId: item.groupId});
      }
    }
  }
</script>

<style scoped>

</style>
